<template>
  <view class="card-box" :class="titleBgColor ? 'yellow' : ''">
    <view class="card-title" v-if="title">
      <img
        :src="iconSrc"
        class="title-icon"
      />
      <view class="title-txt single-line-text">{{ title }}</view>
    </view>
    <view class="card-content" :style="bgColor ? 'background: #ffffff;padding-top: 0' : ''">
      <slot name="content"></slot>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: "推荐",
    },
    iconSrc: {
      type: String,
      default: "https://cdn1.visiotrip.com/h5AndMini/2023-09-14/title-icon-1.png",
    },
    titleBgColor: {
      type: String,
      default: "",
    },
    bgColor: {
      type: String,
      default: "",
    }
  },
};
</script>

<style lang="scss" scoped>
.card-box {
  width: 100%;
  min-height: 100rpx;
  background: rgba(197, 231, 219, 1);
  border-radius: 26rpx;
  backdrop-filter: blur(10.8695652173913px);
  margin: 20rpx auto 0 auto;
  &.yellow {
    background: #FFEBC8;
  }
  .card-title {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 24rpx;
    height: 82rpx;
    .title-icon {
      width: 36rpx;
      height: 36rpx;
    }
    .title-txt {
      color: $sl-color-black;
      font-size: 32rpx;
      font-weight: 600;
      padding-left: 8rpx;
      flex: 1;
    }
  }
  .card-content {
    width: 100%;
    min-height: 100rpx;
    background: #F1FAFA;
    border-radius: 26rpx;
    border: 3rpx solid #ffffff;
    padding-bottom: 24rpx;
    padding-top: 24rpx;
  }
}
</style>
